<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3c.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core">

<ui:composition template="template/template.xhtml">
	<ui:define name="content">

		<h:form id="form">
			<p:growl id="messages" showDetail="true" />

			<p:dataTable id="userList" value="#{userController.users}" var="user"
				editable="true" rowKey="#{user.id}" selectionMode="single"
				selection="#{userController.selectedUser}" style="width:1000px;">
				<f:facet name="header">
		            User List
		        </f:facet>

				<p:ajax event="rowEdit" listener="#{userController.onEditUser}"
					update=":form:messages" />

				<p:column headerText="User Name">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{user.name}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText value="#{user.name}" style="width:100%" />
						</f:facet>
					</p:cellEditor>
				</p:column>

				<p:column headerText="Email">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{user.email}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText value="#{user.email}" style="width:100%" />
						</f:facet>
					</p:cellEditor>
				</p:column>

				<p:column headerText="Sex">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{user.isMale}">
								<f:converter converterId="demo.um.SexConverter" />
							</h:outputText>
						</f:facet>
						<f:facet name="input">
							<p:selectOneMenu value="#{user.isMale}" style="width:100%"
								converter="javax.faces.Boolean">
								<f:selectItem itemLabel="Male" itemValue="true" />
								<f:selectItem itemLabel="Female" itemValue="false" />
							</p:selectOneMenu>
						</f:facet>
					</p:cellEditor>
				</p:column>

				<p:column style="width:30px">
					<p:rowEditor />
				</p:column>
				<p:column style="width:30px">
					<p:commandButton icon="ui-icon-trash"
						style="width:25px;height:25px;" />
				</p:column>
			</p:dataTable>

			<p:toolbar style="width:1000px;">
				<p:toolbarGroup>

					<p:commandButton value="Add User In Dialog"
						onclick="addUserDlg.show()" />
					<p:commandButton value="Add User In Table" />

					<p:separator />

					<p:commandButton value="Edit User In Dialog"/>

					<p:separator />

					<p:commandButton value="Delete User"
						action="#{userController.deleteUser}" update="userList" />
				</p:toolbarGroup>
			</p:toolbar>

			<p:dialog id="addUserDialog" widgetVar="addUserDlg" header="Add User"
				modal="true" width="450" height="250">
				<p:panelGrid columns="2">
					<h:outputLabel value="User Name: *" />
					<p:inputText id="username" required="true"
						value="#{userController.newUser.name}" />

					<h:outputLabel value="Password: *" />
					<p:inputText id="password" required="true"
						value="#{userController.newUser.password}" readonly="true" />

					<h:outputLabel value="Email: *" />
					<p:inputText id="email" required="true"
						value="#{userController.newUser.email}" />

					<h:outputText value="Sex: *" />
					<p:selectOneRadio id="sexOptions" required="true"
						value="#{userController.newUser.isMale}"
						converter="javax.faces.Boolean">
						<f:selectItem itemLabel="Male" itemValue="true" />
						<f:selectItem itemLabel="Female" itemValue="false" />
					</p:selectOneRadio>

					<f:facet name="footer">
						<p:commandButton value="Save" icon="ui-icon-check"
							action="#{userController.addUser}" update="userList" />
					</f:facet>
				</p:panelGrid>
			</p:dialog>
		</h:form>

	</ui:define>
</ui:composition>
</html>